<template>
    <!--  <h3>springboot整合redis之用户手机验证码注册登录</h3>-->
    <div class="form-group has-feedback">
        <input type="tel" class="form-control" v-model="phone" placeholder="请输入手机号" maxlength=11>
        <span class="glyphicon glyphicon-earphone form-control-feedback"></span>
    </div>
    <div class="row">
        <div class="col-xs-6 pull_left">
            <div class="form-group">
                <input class="form-control" v-model="verifyCode" id="msg_num" placeholder="请输入验证码">
            </div>
        </div>
        <div class="col-xs-6 pull_center">
            <div class="form-group">
                <input type="button" class="btn btn-block btn-flat" id="verify_refresh" @click="getMsgNum(this)"
                    value="免费获取验证码">
            </div>
        </div>
    </div>
    <div class="col-xs-12 pull_center">
        <button type="button" class="btn btn-block btn-flat" @click="validateNum()">验证</button>
    </div>

</template>

<script setup>
import { ref } from '@vue/reactivity';
import axios from 'axios';
import { ElMessage } from 'element-plus'

let messageData=ref();
let wait =ref(120) ; // 短信验证码120秒后才可获取下一个
let phone=ref(17265861354)
    /**
 * 获取验证码
 */
function getMsgNum(that) {
        setButtonStatus(that); // 设置按钮倒计时
        // let obj = {
        //     phoneNumber: phone.value
        // };
        axios.post('/api/smsXxs',
            {
            phoneNumber: phone.value,           
        })
        .then((result)=>{
            console.log(result)
             if(result.isOk=="OK") {
                    alert("验证码发送成功");
                    messageData.value = result;
                }else {
                    alert("验证码发送失败")
                }
        })
        .catch((result)=>{
            console.log(result)
        });
    }
     /**
     * 设置按钮状态
     */
    function setButtonStatus(that) {
        if (wait.value == 0) {
            // that.removeAttribute("disabled");
            that.value="免费获取验证码";
            wait.value = 60;
        } else {
            // that.setAttribute("disabled", true);
            that.value=wait.value+"秒后可以重新发送";
            wait.value--;
            setTimeout(function() {
                setButtonStatus(that)
            }, 1000)
        }
    }

     /**
     * 注册按钮
     */
    let verifyCode=ref()
    function validateNum() {
        // var data = {
        //     // verifyCode: messageData.verifyCode,
        //     // phone: messageData.phone,
        //     verifyCode:verifyCode.value,
        //     phone:phone.value
        // };

        axios.post('/api/validateNum',{
            phone:phone.value,
            verifyCode:verifyCode.value
        }).then((result)=>{
           if(result.data.code==404){
                ElMessage.warning("验证码已过期!")
           }else if(result.data.code==500){
                ElMessage.error("验证码不正确!")
           }else{
                ElMessage.success("验证成功!")
           }
        }).catch((result)=>{
            console.log(result)
        }) 
    }
</script>

<style>
</style>